<template>
<div>

  <t-tabs  size="medium" v-model="tabValue">
    <t-tab-panel :class="[reviewOpen?'tab-full-panel':'tab-panel']" value="1" label="基本信息" :destroyOnHide="true">
      <t-card class="step-card" size="small" title="变更信息">
        <t-form  label-align="top" :colon="true">
          <t-form-item  label="变更类型">
            {{ formData.changeType | filterByDict(dict.type.change_type) }}
          </t-form-item>
          <t-form-item  label="变更说明">
            <tiny-mce-editor :disabled="objId!==null" v-model="formData.note" ></tiny-mce-editor>
          </t-form-item>
        </t-form>
<!--        <template #title>-->
<!--          {{ formData.changeType | filterByDict(dict.type.change_type) }}-->
<!--        </template>-->
      </t-card>
        <t-form labelWidth="140px" :colon="true">
          <t-form-item v-if="formData.changeType === '1'" label="">
            <project-member  v-model="formData.projectMembers" :projectId="formData.projectId" :showTip="false" :editOpen="false" phaseType="31"></project-member>
          </t-form-item>
          <t-form-item v-else-if="formData.changeType === '2'" label="">
            <project-unit ref="project-unit" :adviceFunding="adviceFunding" v-model="formData.projectCompanys" :projectId="formData.projectId" :editOpen="false" phaseType="31"></project-unit>
          </t-form-item>
          <t-form-item v-else-if="formData.changeType === '3'" label="">
            <t-form-item label="变更后任务书开始时间" name="contractChangeDate.startDate">
              {{formData.contractChangeDate.startDate}}
              <!--        <t-date-picker clearable style="width: 390px" v-model="formData.contractChangeDate.startDate"></t-date-picker>-->
            </t-form-item>
            <t-form-item label="变更后任务书结束时间" name="contractChangeDate.completeDate">
              {{formData.contractChangeDate.completeDate}}
              <!--        <t-date-picker clearable style="width: 390px" v-model="formData.contractChangeDate.completeDate"></t-date-picker>-->
            </t-form-item>
          </t-form-item>
        </t-form>
    </t-tab-panel>
    <t-tab-panel value="2"  :class="[reviewOpen?'tab-full-panel':'tab-panel']" label="审批附件信息">
      <t-row style="align-items: stretch" :gutter="14">
        <t-col :span="12">
          <t-table v-if="isMyProject" row-key="id" :columns="projectFileColumns" :data="projectFileData">
            <template #id="{row, rowIndex}">
              {{ rowIndex+1 }}
            </template>
            <template #op="{row}">
              <file-upload  @success="uploadSuccess"  tips="限制pdf、图片" accept="application/pdf,image/*" v-model="row.fileIds" :moduleKey="row.moduleKey"
                            :fileList="row.fileLists"
                            :multiple="true">
                <t-button variant="outline">
                  <t-icon name="cloud-upload" slot="icon"/>
                  点击上传
                </t-button>
              </file-upload>
            </template>
            <template #c1="{row}">
              <a v-if="row.c3" class="t-button-link" :href="`${file_domain}/${row.c3}`" target="_blank">{{ row.c1 }}</a>
              <div v-else>{{ row.c1 }}</div>
            </template>
          </t-table>
          <t-table v-else row-key="id" :columns="projectFileColumns" :data="projectFileData">
            <template #id="{row, rowIndex}">
              {{ rowIndex+1 }}
            </template>
            <template #c1="{row}">
              <a v-if="row.c3" class="t-button-link" :href="`${file_domain}/${row.c3}`" target="_blank">{{ row.c1 }}</a>
              <div v-else>{{ row.c1 }}</div>
            </template>
            <template  #op="{row}">
              <div v-for="(item,index) in row.fileLists" :key="index">
                <a class="t-button-link" target="_blank" :href="item.url" >
                  {{item.name}}
                </a>
              </div>
            </template>
          </t-table>
        </t-col>
      </t-row>
    </t-tab-panel>
  </t-tabs>
</div>
</template>

<script>
import { VITE_FILE_DOMAIN } from '@/api/upload'
import projectMember from "../../pm/components/project-member.vue";
import projectUnit from "../../pm/components/project-unit.vue";
import TinyMceEditor from "@/components/TinyMceEditor/index.vue";
import FileUpload from "@/components/FileUpload/index.vue";
import {getFiles} from "@/api/common";

export default {
  name: "change-apply-detail",
  dicts: ['change_type'],
  components:{
    projectMember,
    projectUnit,
    TinyMceEditor,
    FileUpload
  },
  props:{
    objId: [String,Number],
    // header: String,
    isDialog:{
      type: Boolean,
      default: true
    },
    reviewOpen: {
      type: Boolean,
      default: false
    },
    contrastOpen: {
      type: Boolean,
      default: false
    }
  },
  data(){
    return {
      tabValue: '1',
      adviceFunding: 0,
      formData: {
        projectId: null,
        contractId: null,
        changeType: '',
        projectMembers: [],
        projectCompanys: [],
        contractChangeDate: {
          startDate: '',
          completeDate: '',
        }
      },
      site_tag: import.meta.env.VITE_SITE_TAG,
      file_domain: VITE_FILE_DOMAIN,
      isMyProject: false,
      stepValue: '1',
      projectFileColumns: [
        {
          colKey: "id",
          title: "序号",
          align: "center",
          width: 64
        },
        {
          colKey: "c1",
          title: "附件名称",
          align: "center",
        },
        {
          colKey: "c2",
          title: "是否必需",
          align: "center",
        },
        {
          colKey: "op",
          title: "附件列表",
          align: "left",
        },
      ],
      projectFileData:[
        {
          id: 1,
          c1: "项目变更申请表(盖章件)",
          // c2: "审批通过后，从系统导出PDF线下盖章(申报用户上传)",
          c2: "是",
          moduleKey: "XMBGSQB",
          fileIds: [],
          fileLists: [],
        },
      ],
    }
  },
  watch: {
    objId: {
      immediate: true,
      handler(val) {
        if (val) {
          this.getObj(val);
        }
      }
    },
  },
  methods:{
    getObj(){
      this.$api.kjxm.implement.changeApplyGet(this.objId).then(response => {
        Object.assign(this.formData, response.data);
        this.adviceFunding = response.data.contract.adviceFunding;
        if(response.data.createUserId===Number(this.$store.state.user.userId)){
          this.isMyProject = true;
        }
        // 获取附件
        getFiles(this.objId).then((res) => {
          const files = {}
          res.data.forEach((item) => {
            if (!files[item.moduleKey]) {
              files[item.moduleKey] = []
            }
            files[item.moduleKey].push({
              name: item.fileName,
              url: item.fullFilePath,
              id: item.id,
              filePath: item.filePath
            })
          })
          this.projectFileData.forEach((val,index)=>{
            this.projectFileData[index].fileLists = files[val.moduleKey] || [];
            this.projectFileData[index].fileIds = files[val.moduleKey]?.map(val => val.id) || [];
          })
        });
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    },
    uploadSuccess(ids){
      this.$api.kjxm.implement.changeApplyUpdate({
        id: this.objId,
        sysAttMainVo: {
          sysAttMainIds: ids,
        }
      }).then(val => {
        this.$message.success("上传成功");
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    },
  }
}
</script>

<style lang="less" scoped>
.tab-panel{
  padding: 10px;
  height: calc(65vh - 64px);
  overflow: scroll;
}
.tab-full-panel{
  padding: 10px;
  height: calc(80vh - 64px);
  overflow: scroll;
}
.t-form__item{
  margin-bottom:6px
}

.t-row {
  margin-bottom: 14px;
}

.step-card {
  margin-bottom: 14px;
}
</style>
